  // 当超过宽度时，显示省略号
  @mixin ell() {
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }
  // 利用绝对定位后margin自适应实现水平垂直居中，兼容IE6+
  @mixin caa($direction: both) {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    @if $direction == both {
      margin: auto;
    } @else if $direction == h {
      margin-left: auto;
      margin-right: auto;
    } @else if $direction == v {
      margin-top: auto;
      margin-bottom: auto;
    }
  }
  // 只适用行内或行内块级元素水平垂直居中
  @mixin ctv() {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
  }
   
  // 尺寸确定，绝对定位后margin偏移实现水平垂直居中，兼容IE6+，不好用
  @mixin ca($x, $y) {
    position: absolute;
    left: 50%;
    top: 50%;
    width: $x;
    height: $y;
    margin-left: -$x/2;
    margin-top: -$y/2;
  }
   
  // 利用translate实现未知宽高的水平垂直居中，兼容性不好
  @mixin ct($direction: both) {
    position: absolute;
    @if $direction == both {
      top: 50%;
      left: 50%;
      -webkit-transform: translate3d(-50%, -50%, 0);
      transform: translate3d(-50%, -50%, 0);
    } @else if $direction == h {
      left: 50%;
      -webkit-transform: translate3d(-50%, 0, 0);
      transform: translate3d(-50%, 0, 0);
    } @else if $direction == v {
      top: 50%;
      -webkit-transform: translate3d(0, -50%, 0);
      transform: translate3d(0, -50%, 0);
    }
  }
   
  // flex实现水平垂直居中
  @mixin cf($direction: both) {
    display: flex; /*谷歌，火狐等新版本*/
    display: -webkit-box; /*安卓低版本*/
    display: -moz-box; /*火狐低版本*/
    display: -ms-flexbox; /*IE版本*/
    display: -webkit-flex; /*谷歌*/
    @if $direction == both {
      justify-content: center;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      align-items: center;
      -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
    } @else if $direction == h {
      justify-content: center;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
    } @else if $direction == v {
      align-items: center;
      -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
    }
  }

  // 文字不可选择
  @mixin no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }